<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="resource/clipboard.min.js"></script>
    <style>
      #popup {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="click">点击添加微信</div>
    <div id="popup">
      <span id="close">关闭</span>
      <div id="wcid">uncle-tomlinson</div>
      <div>复制成功</div>
      <div>
        <a
          href="weixin://"
          class="btn"
          data-clipboard-action="copy"
          data-clipboard-target="#wcid"
          >打开微信</a
        >
      </div>
    </div>
    <script>
      //复制功能
      var addc = document.getElementById("click");
      var popp = document.getElementById("popup");
      addc.onclick = function() {
        popp.style.display = "block";
        //document.execCommand()方法
        // var cont=document.getElementById("wcid").innerText;
        // var cinput=document.createElement("input");
        // cinput.value=cont;
        // document.body.appendChild(cinput);
        // cinput.select();
        // document.execCommand("Copy");
        // cinput.style.display='none';

        //clipboard.js方法
        var clipboard = new ClipboardJS(".btn");
        // clipboard.on('success', function(e) {
        //     console.log(e);
        // });
        // clipboard.on('error', function(e) {
        //     console.log(e);
        // });
      };
      var close = document.getElementById("close");
      close.onclick = function() {
        popp.style.display = "none";
      };
    </script>
  </body>
</html>
